<template>
	<view class="home">
		<!-- 头部结构 -->
		<view class="home-header">
			<image class="header-logo" src="../../static/images/logo.png"></image>
			<view class="header-search">
				<text class="iconfont icon-sousuo"></text>
				<input class="search-input" placeholder-style="color:red" type="text" placeholder="搜索商品">
			</view>
			<button class="header-btn">马上搜索</button>
		</view>
		
		<!-- 标签导航项 -->
		<scroll-view class="home-nav" scroll-x="true" enable-flex>
			<view class="nav-item" :class="{active: currentId===0}" @click="changeNavId(0)">推荐</view>
			<view class="nav-item" :class="{active: currentId===nav.L1Id}" v-for="(nav,index) in navList" :key="nav.L1Id" @click="changeNavId(nav.L1Id)">{{nav.text}}</view>
		</scroll-view>
		
		<!-- 垂直方向的滚动视频或是主要内容部分 -->
		<scroll-view scroll-y="true" class="home-content" >
			<view v-show="currentId===0">
				<!-- 轮播图 -->
				<swiper class="content-lunbo" :indicator-dots="true" :autoplay="true" :interval="1000" :duration="1000" circular>
					<swiper-item>
						<image src="https://yanxuan.nosdn.127.net/static-union/1676255646c6f282.jpg?type=webp&imageView&quality=75&thumbnail=750x0"></image>
					</swiper-item>
					<swiper-item>
						<image src="https://yanxuan.nosdn.127.net/static-union/1676018024dc59e2.jpg?type=webp&imageView&quality=75&thumbnail=750x0"></image>
					</swiper-item>
					<swiper-item>
						<image src="https://yanxuan.nosdn.127.net/5f4fdb3d838090d6b35586407f99b420.jpg?type=webp&imageView&quality=75&thumbnail=750x0"></image>
					</swiper-item>
				</swiper>
				
				<!-- 口号部分 -->
				<view class="content-slogan">
					<view class="slogan-item" v-for="slogan in sloganList" :key="slogan.desc">
						<image :src="slogan.icon"></image>
						<text>{{slogan.desc}}</text>
					</view>
				</view>
				
				<!-- 内容导航的结构 -->
				<view class="content-nav">
					<view class="nav-item" v-for="nav in navList" :key="L1Id">
						<image :src="nav.picUrl" mode=""></image>
						<text>{{nav.text}}</text>
					</view>
				</view>
				
				<!-- 楼层结构 -->
				<ContentFloor v-for="floor in floorsList" :floor="floor" :key="floor.titlePicUrl"></ContentFloor>
			</view>
			<Card v-show="currentId!==0" :currentId="currentId"></Card>
		</scroll-view>
		
	</view>
</template>

<script>
	import ContentFloor from './components/ContentFloor.vue'
	import Card from './components/Card.vue'
	import {mapActions,mapGetters} from 'vuex'
	export default {
		data() {
			return {
				isShow:false,
				currentId:0
			}
		},
		components:{
			ContentFloor,
			Card
		},
		
		computed:{
			...mapGetters('home',['navList','sloganList','floorsList'])
		},
		onLoad() {
			
			this.getHomeData();
			
		
		},
		methods: {
			
			getHomeData(){
				
				this.$store.dispatch('home/getHomeInfoData')
				
				
			},
		
			changeNavId(id){
				this.currentId = id
			}
		}
	}
</script>

<style lang="stylus">
	.home
		height:100% 
		.home-header 
			padding:10upx
			display: flex
			.header-logo 
				width: 120upx
				height: 40upx
				padding: 10upx 6upx
			.header-search 
				flex:1;
				display: flex
				align-items: center
				height: 40upx
				border: 1upx solid #999
				padding:10upx
				margin:0 10upx
				.iconfont 
					margin-right:10upx
				.search-input 
					font-size: 26upx
			.header-btn 
				width: 140upx
				height: 60upx
				line-height: 30upx
				font-size:26upx
				padding:16upx 10upx
		.home-nav 
			display: flex
			height: 80upx;
			.nav-item 
				font-size:28upx 
				padding:20upx
				flex-shrink: 0
				&.active 
					border-bottom:1upx solid #f00
		.home-content
			height: calc(100vh - 160upx)
			.content-lunbo 
				width: 100% 
				height: 350upx; 
				image 
					width: 100%;
					height: 100%;
			.content-slogan
				display: flex 
				justify-content: space-around
				padding:10upx 0;
				.slogan-item 
					font-size:24upx
					display: flex
					align-items: center
					image 
						width: 30upx;
						height: 30upx;
						margin-right:4upx
			.content-nav 
				display: flex 
				flex-wrap: wrap
				.nav-item 
					width: 20%;
					display: flex 
					flex-direction: column
					align-items: center
					font-size:28upx
					padding-top:20upx
					image 
						width: 76%;
						height: 120upx;
						padding-bottom:14upx
			
</style>
